<!--
 * @Author: CarlYang
 * @Date: 2021-08-02 15:42:20
 * @LastEditTime: 2021-08-02 16:44:09
 * @LastEditors: Please set LastEditors
 * @Description: 组织关系图
 * @FilePath: \vue-g6\src\views\MemberRelation\index.vue
-->
<template>
  <div id="container">
    <tree-canvas
      :graphData="graphData"
      :canvasConfig="config"></tree-canvas>
  </div>
</template>

<script>
import TreeCanvas from '@/components/TreeCanvas'
import {
  demoData
} from './data.js'
export default {
  name: 'MemberRelation',
  components: {
    TreeCanvas
  },
  data () {
    return {
      config: {
        node: { // 节点的默认配置
          label: { // 标签配置
            show: true, // 是否显示
            color: '250,250,250', // 字体颜色
            font: 'bold 20px 微软雅黑', // 字体大小及类型
            textPosition: 'Middle_Center'// 文字位置 Top_Center,Bottom_Center,Middle_Right
          },
          shape: 'rect', // 节点形状 circle,rect
          color: '20,220,100', // 节点颜色
          borderColor: '255,255,255', // 边框颜色
          borderWidth: 2, // 边框宽度,
          borderRadius: 8, // 边框圆角大小
          lineDash: [0], // 边框虚线间隔,borderWidth>0时生效
          alpha: 1, // 节点透明度
          width: 180, // 节点的长度(shape为rect生效)
          height: 50, // 节点的高度(shape为rect生效)
          selected: { // 选中时的样式设置
            borderColor: '50,120,230', // 选中时边框颜色
            borderAlpha: 1, // 选中时的边框透明度
            borderWidth: 4, // 选中是的边框宽度
            showShadow: false, // 是否展示阴影
            shadowColor: '50,100,250'// 选中是的阴影颜色
          },
          ondblClick: function (event, node) {
            // if (node.contract && node.contract == 1) {
            //   node.contract = 0
            //   node.tipText = null
            //   expendChild(node)
            // } else {
            //   node.contract = 1
            //   contractChild(node)
            // }
          }
        },
        link: { // 连线的默认配置
          lineType: 'hlink', // 连线类型,direct,curver,vlink,hlink,bezier,vbezier,hbezier
          colorType: 'source', // 连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色，defined:自定义
          color: '120,120,120', // 连线颜色
          alpha: 0.6, // 连线透明度
          lineWidth: 2, // 连线宽度
          showArrow: false// 显示箭头
        },
        highLightNeiber: false, // 相邻节点高度标志
        wheelZoom: 0.8
      },
      graphData: {}
    }
  },
  created () {
    this.graphData = this.buildRelationData(demoData)
  },
  methods: {
    buildRelationData (demoData) {
      const nodes = []
      const links = []
      const colorMap = {
        0: '220,20,60',
        1: '60,180,115',
        2: '70,150,210',
        3: '234,150,52'
      }

      // 属性可以定义个性化显示样式
      for (const id in demoData) {
        const item = demoData[id]
        nodes.push({ id: id, label: item.name, color: colorMap[item.level], height: item.level === 0 ? 60 : 60 })
        if (item.level > 0) {
          links.push({ source: item.parent_node_id, target: id, lineType: item.parent_node_id === 3 ? 'vlink' : 'vlink' })
        }
      }
      return { nodes: nodes, links: links }
    }
  }
}
</script>
